<template>
    <div class="player-box-container" id="player">
        <div style="position: relative">
            <div class="background-img-container">
                <img :src="coverImg">
            </div>
            <div class="opt-container">
                <div class="player-main-part">
                    <div class="cd-box">
                        <cd-box :src="coverImg"></cd-box>
                    </div>
                    <div class="msg-box">
                        <div class="album">
                            <album-msg :title="albumMsg.name" :arts="albumMsg.arts" :album="albumMsg.album"></album-msg>
                        </div>
                        <div class="lrc">
                            <div style="top:100px" id="lrcBox">
                                <div v-for="(item, index) of lyricList.arr" :key="index" class="lrc-block">
                                    {{item}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {useStore} from "vuex";
import {computed, reactive, watch, ref} from "vue";
import {songApi} from "../../../api/songApi.js";

import albumMsg from "./playerBox/albumMsg.vue";
import cdBox from "./playerBox/cdBox.vue";
export default {
    name: "playerBox",
    components:{
        albumMsg,
        cdBox
    },
    setup() {
        let store = useStore()
        let isShowPlayer = computed(()=>store.state.playerStore.isShowPlayer)
        let songId = computed(()=>store.state.playerStore.songId)
        let isPlay = computed(()=>store.state.playerStore.isPlay)
        /*
        * 封面
        * */
        let coverImg = ref('')

        /*
        * 用于记录歌词位置的三个数组
        * */
        let lyricList = reactive({arr:[]})
        let timeList = reactive({arr:[]})
        let lrcBlockHeightList = []

        /*
        * 用于在album-msg上呈现的数据
        * */
        let albumMsg = {
            name:'',
            arts:{
                name:'',
                id:''
            },
            album:{
                name:'',
                id:''
            }
        }



        /*
        * 设置歌词位置
        * */
        function setLrcPos() {
            let player = document.getElementsByTagName('audio')[0]
            let lrcBox = document.getElementById('lrcBox')
            for (let item of lrcBox.children) {
                lrcBlockHeightList.push(item.scrollHeight)
            }

            let clock = setInterval(()=>{
                if (isPlay.value) {
                    let nowTime = Math.floor(player.currentTime)
                    if (nowTime >= timeList.arr[timeList.arr.length]) {
                        clearInterval(clock)
                    }

                    for (let i = 0; i < timeList.arr.length; i++) {
                        if (nowTime <= timeList.arr[i]) {
                            lrcPush(lrcBox, i-1)
                            break
                        }
                    }
                }
            },1000)
        }

        /*
        * 歌词推进
        * */
        function lrcPush(lrcBox, index) {
            if (index < 0) {
                return
            }

            let moveLength = 100
            for (let i = 0; i < index; i++) {
                moveLength -= lrcBlockHeightList[i]
            }
            lrcBox.style.top = moveLength + 'px'

            for (let i = 0; i < lrcBox.children.length; i++) {
                if (i === index) {
                    lrcBox.children[i].className = 'lrc-block active'
                } else {
                    lrcBox.children[i].className =  'lrc-block'
                }
            }
        }



        /*
        * 监听，是否展示播放器
        * */
        watch(isShowPlayer,(newVal)=>{
            if (newVal) {
                document.getElementById('player').style.top = '0'
                setLrcPos()
            } else {
                document.getElementById('player').style.top = 'calc(100% + 70px)'
            }
        })



        /*
        * 监听store内的songId
        * */
        watch(songId, async value => {
            store.commit('playerStore/setIsPlay', true)
            getClear() // 首先清空与歌词有关的三个数组，以便于重新设置
            await getLyric(value).then(()=>{
                getSongDetail(value).then(()=>{
                    setLrcPos()
                })
            })
        })

        async function getLyric(id) {
            await songApi.lyric(id,res=>{
                setLyric(res.data.lrc.lyric)
                setTimeList(res.data.lrc.lyric)
            }, reason=>{
                console.warn(reason)
            })
        }

        /*
        * 设置歌词列表
        * */
        function setLyric(lrc) {
            lyricList.arr.length = 0
            let arr = lrc.split('\n')
            for (let item of arr) {
                lyricList.arr.push(item.replace(/\[.*?\]/g,''))
            }
            lyricList.arr.pop()
        }

        /*
        * 设置时间轴列表
        * */
        function setTimeList(lrc) {
            timeList.arr.length = 0
            let arr = lrc.split('\n')
            for (let item of arr) {
                timeList.arr.push(getSecByMin(item.substring(1,6)) - 1)
            }
            timeList.arr.pop()
        }

        /*
        * 由分钟得到秒
        * */
        function getSecByMin(str) {
            let arr = str.split(':')
            return Number(arr[0])*60 + Number(arr[1])
        }

        /*
        * 得到音乐信息
        * */
        async function getSongDetail(id) {
            await songApi.songDetail(id,res=>{
                coverImg.value = res.data.songs[0].al.picUrl
                albumMsg.name = res.data.songs[0].name
                albumMsg.arts = res.data.songs[0].ar
                albumMsg.album.name = res.data.songs[0].al.name
                albumMsg.album.id = res.data.songs[0].al.id
            }, reason=>{
                console.warn(reason)
            })
        }

        /*
        * 当歌曲id改变之后，所有的数据恢复初识状态
        * */
        function getClear() {
            document.getElementById('lrcBox').style.top = '250px'
            timeList.arr.length = 0
            lyricList.arr.length = 0
            lrcBlockHeightList.length = 0
        }

        return {
            lyricList,
            coverImg,
            albumMsg,
        }
    }

}
</script>

<style lang="less" scoped>
@import "../../../style";

.player-box-container {
    position: absolute;
    top: calc(100% + 70px);
    width: 100%;
    height: 100%;
    background-color: #adadad;
    transition: top 500ms ease-in-out;
    overflow-y: scroll;
}



.background-img-container {
    position: absolute;
    width: 100%;
    height: auto;
    filter: blur(100px) brightness(50%);

}

.background-img-container img {
    width: 100%;
    height: 700px;
}

.opt-container {
    padding: 20px;
    position: absolute;
    width: calc(100% - 40px);
    height: 1000px;
}

.player-main-part {
    .inner-pos(none);
    width: 100%;
    height:600px;
    //background-color: red;
    .cd-box {
        .inner-pos(center);
        width: 40%;
        height:100%;
        //background-color: blanchedalmond;
    }
    .msg-box {
        position: relative;
        padding: 0 0 0 50px;
        width: calc(60% - 50px);
        height: 100%;
        .album {
            width: 100%;
            height: 20%;
            overflow: hidden;
        }
        .lrc {
            padding: 10px;
            position: relative;
            width: calc(100% - 20px);
            height: calc(80% - 20px);
            overflow: hidden;
            &>div {
                position: absolute;
                transition: all ease-in 300ms;
            }
        }
    }
}

.lrc-block {
    line-height: 60px;
    font-size: 40px;
    color: white;
    height: auto;
    padding: 20px 0 20px 0;
    transition: all 300ms linear;
    filter: blur(4px);
    font-weight: bolder;
}

.lrc-block.active {
    font-weight: bolder;
    transition: all 300ms linear;
    filter: blur(0);
}
</style>